<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
		<title>虎扑跑步运动会</title>
		<link rel="stylesheet" media="screen" href="/static/css/base.css" />
		<link href='/static/css/show/sports.css' rel='stylesheet' />
		<style>
			html, body{
				width: 100%;
				height: 100%;
				position: relative;;
				overflow-x: hidden;
				overflow-y: scroll;
			}
			@media screen and (max-width: 320px){
				body{
					min-height: 568px;
					background-size: 100% 568px !important;
				}
				.text{
					font-size: 1rem;
				}
				.join{
				    transform: translateX(-55%) translateY(-162%);
				}
				.left-line {
				    bottom: 22.27%;
				    width: 18.8%;
				    height: 3%;
				}
				.right-line{
					bottom: 22.6%;
					width: 19%;
					height: 2.1%;
				}
			}
		</style>
	</head>
	<body class='main'>
        <!-- <a href='{$rUrl}' {if $firstEnter > 0}class='join look-active'{/if}class='join join-active'{/else}></a> -->
        <a href='{$rUrl}' class='join join-active'></a>
		<img class='homebg' src='/static/images/sports/009.png' />
		<img class='hometitle' src='/static/images/sports/hometitle.png' />
		<img class='logo' src='/static/images/sports/logo.png' />
		<img class='star' src='/static/images/sports/star.png' />
		<img class='detail-btn' src='/static/images/sports/detailBtn.png' />
		<img class='open' src='/static/images/sports/open.png' />
		<img class='left-line' src='/static/images/sports/leftLine.png' style='left:0'/>
		<img class='right-line' src='/static/images/sports/rightLine.png' style='right:0'/>
		<img class='click' src='/static/images/sports/click.png' />
		<div class='surprise'></div>
		<span class='detail'></span>
		<div class='box none'>
			<div class='detail-box'>
				<img src='/static/images/sports/tipTop.png' />
				<img src='/static/images/sports/detailTitle.png' />
				<img src='/static/images/sports/detail.png' />
			</div>
			<div class='iphone-box'>
				<img src='/static/images/sports/iphoneText.png' />
				<img src='/static/images/sports/tipTop.png' />
				<img class='submit' src='/static/images/sports/submitbg.png' />
				<img class='submit-text' src='/static/images/sports/iphoneBtn.png' />
				<img src='/static/images/sports/iphone.png' />
			</div>
		</div>
		<script src="/static/js/jquery.min.js"></script>
		<script>

		    var surprise = document.querySelector('.surprise');
		    var detail = document.querySelector('.detail');
		    var box = document.querySelector('.box');
		    var detailBox = document.querySelector('.detail-box');
		    var iphoneBox = document.querySelector('.iphone-box');
			var submit = document.querySelector('.submit');
			var submitText = document.querySelector('.submit-text');
			var click = document.querySelector('.click');
			var join = document.querySelector('.join');

			var rate = (375 / 603).toFixed(2);
 		    var height = document.body.clientHeight;
 		    var width = document.body.clientWidth;
 		    //  console.log('height = ' + height + ' width = ' + width);
		    if(width > 320){
		 	    document.body.style.width = Math.floor(rate * height) + 'px';
		    }

			// 点击活动详情
			detail.onclick = function(){
				box.className = 'box';
				iphoneBox.className = 'none';
				detailBox.className = 'detail-box to-bottom';
			};

			box.onclick = function(){
				box.className = 'box none';
			};

			surprise.onclick = function(){
				box.className = 'box';
				detailBox.className = 'detailBox none';
				iphoneBox.className = 'iphone-box to-bottom';
			};

			iphoneBox.onclick = function(event){
				event.stopPropagation();
			};

			//firstEnter>0   查看任务
 		   //  var firstEnter = true; // 是第一次登录
			var x = 0;
 		    if({$firstEnter} > 0){
				// 如果不是第一次登录，切换 “参与活动” 为 “查看任务”
					join.className = 'join look-active';
 		    }

			if(typeof jw === "object"){
				jw.api('share_button', JSON.stringify({'status': true}));
				jw.api('set_share_info', JSON.stringify({
					'title': '抢先体验iPhone7，你只差这一步！',
					'description': '我正在参与虎扑跑步运动会，跑步送装备，一起来玩吧！',
					'img_url': 'http://irun.hupu.com/static/images/sports/share.jpg',
					'link_url': 'http://irun.hupu.com/show/share',
				}));
			}

			function submitClick(){
				$(function(){
				    var sup = typeof jw === "object";

				    if(!sup) {
					    alert('请到app内分享...');
					    $("#title").append("<div><h5>不支持分享jw.api | type:" + (typeof jw) + "</h5></div>");
				    }else{
						jw.api('share', JSON.stringify({'channel': 'weixin_side'}));
					}
			    });

			}

			submit.onclick = function(){
				submitClick();
			};
			submitText.onclick = function(){
				submitClick();
			};

		</script>
	</body>
</html>
